<script setup>
import { ref,reactive,toRefs,inject,onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useItem } from '../../../../store/index.js'
import { getPVCListHandler as getList } from '../../../../api/pvc.js'

const useItemer = useItem()
const props = defineProps({
  volumeConfig: {
    type: Object,
    default: {}
  },
  method: {
    type: String,
    default: 'Create'
  }
})
onMounted(() => {
  if (props.method != 'Create') {
    data.newVolumeConfig = props.volumeConfig
  }
})
const data = reactive({
  newVolumeConfig: {
    name: '',
    persistentVolumeClaim: {
      claimName: '',
      readonly: false
    }
  },
  rules: {
    name: [
      {required: true, message: '请输入Volume名称', trigger: 'blur'}
    ],
    'persistentVolumeClaim.claimName': [
      {required: true, message: '请选择PVC', trigger: 'blur'},
    ],
  },
  items: []

})
let formRef = ref()
// 选择框展开调用接口查询数据

// 订阅关闭dialog的方法
const closeDialog = inject('closeAddVolumeDialog')

const submit = () => {
  formRef.value.validate((valid) =>{
    if (valid) {
      console.log(data.newVolumeConfig)
      if (useItemer.item.spec.template.spec.volumes == undefined) {
        useItemer.item.spec.template.spec.volumes = []
      }
      for (let i=0;i<useItemer.item.spec.template.spec.volumes.length;i++) {
        if (useItemer.item.spec.template.spec.volumes[i].name == data.newVolumeConfig.name) {
          // 已经存在相同名字的volume名称
          ElMessage.error('volume不能重复')
          return
        }
      }
      const newVolume = JSON.parse(JSON.stringify(data.newVolumeConfig))

      useItemer.item.spec.template.spec.volumes.push(newVolume)
      console.log(useItemer.item.spec.template.spec.volumes)
      closeDialog()
    }else {
      ElMessage.warning('请完善表单数据')
    }
  })
}
const visibleChanged = (visible)=>{
  console.log("visible:",visible)
  // 展开的时候去查询items
  if (visible) {
    // 调用查询列表的函数
    const getData = {
      clusterId: useItemer.clusterId,
      namespace: useItemer.namespace
    }
    getList(getData).then(
      (res) => {
        data.items = res.data.data.items
        console.log(data.items)
      }
    )
  }
}
const { newVolumeConfig,rules,items } = toRefs(data)
</script>

<template>
  <el-form :model="newVolumeConfig" ref="formRef" :rules="rules">
    <el-row :gutter="5">
      <el-col :span="8" v-if="props.method=='Create'">
          <el-form-item label="volume名称" prop="name" required>
            <el-input v-model.trim="newVolumeConfig.name" style="width: 180px;" placeholder="请输入Volume名称" />
          </el-form-item>
      </el-col>
      <el-col :span="8">
          <el-form-item label="PVC" prop="persistentVolumeClaim.claimName" required>
              <el-select v-model.trim="newVolumeConfig.persistentVolumeClaim.claimName" style="width:180px" placeholder="请选择PVC" @visible-change="visibleChanged">
                <el-option
                v-for="item in items"
                :key="item.metadata.name"
                :label="item.metadata.name"
                :value="item.metadata.name"
                />
              </el-select>
          </el-form-item>
      </el-col>

      <el-col :span="8">
            <el-form-item label="只读" prop="persistentVolumeClaim.readonly">
                <el-switch v-model="newVolumeConfig.persistentVolumeClaim.readonly" />
            </el-form-item>
      </el-col>
    </el-row>
    <!-- 添加按钮 -->
    <div  v-if="props.method == 'Create'" style="display: flex;">
      <el-button type="primary" @click="submit()" style="margin: 10px auto;">
        添加
      </el-button>
    </div>
  </el-form>
</template>

<style scoped>
</style>
